<template>
  <a-card :bordered="false">

    <div class="account-settings-info-view">
      <a-row :gutter="16">
        <a-col :md="24" :lg="6"></a-col>
        <a-col :md="24" :lg="12">
          <a-form layout="vertical" :model="model" >
            <a-form-model-item  label="头像">
              <j-image-upload class="avatar-uploader" text="上传" v-model="model.avatar" ></j-image-upload>
              <!--              <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>-->
            </a-form-model-item>
            <!--            <a-form-item label="用户账号"  prop="username">-->
            <!--              <a-input placeholder="请输入用户账号" v-model="model.username" :readOnly="!!model.id"/>-->
            <!--            </a-form-item>-->
            <a-form-item label="用户姓名" prop="realname">
              <a-input hidden v-model="model.id" />
              <a-input placeholder="请输入用户姓名" v-model="model.realname"/>
            </a-form-item>
            <a-form-item label="手机号码" prop="phone">
              <a-input placeholder="请输入手机号码" v-model="model.phone" />
            </a-form-item>
            <a-form-model-item label="生日">
              <a-date-picker
                style="width: 100%"
                placeholder="请选择生日"
                v-model="model.birthday"
                :format="dateFormat"
                :getCalendarContainer="node => node.parentNode"/>
            </a-form-model-item>
            <a-form-model-item label="性别" >
              <a-select  v-model="model.sex"  placeholder="请选择性别" :getPopupContainer= "(target) => target.parentNode">
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-item label="邮箱" prop="email">
              <a-input placeholder="请输入邮箱" v-model="model.email" />
            </a-form-item>
            <a-form-item>
              <a-button  @click="handleSubmit" type="primary" :loading="confirmLoading">保存</a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="24" :lg="6"></a-col>
      </a-row>
      <!--      <avatar-modal ref="modal"></avatar-modal>-->
    </div>
  </a-card>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import { getAction, getFileAccessHttpUrl } from '@/api/manage'
import { getCurrentUserInfo, upCurrentUserInfo, duplicateCheck } from '@/api/api'
import { disabledAuthFilter } from "@/utils/authFilter"
import { message } from 'ant-design-vue';


export default {
  components: {},
  data() {
    return {
      // cropper
      dateFormat:"YYYY-MM-DD",
      preview: {},
      model: {
      },
      /* 数据源 */
      dataSource:[],
      /* table加载状态 */
      loading:false,
      confirmLoading: false,
      option: {},
      validatorRules:{
        realname:[{ required: true, message: '请输入用户姓名!' }],
        phone: [{validator: this.validatePhone}],
        email: [{validator: this.validateEmail}]
      },
    }
  },
  mounted(){
    getCurrentUserInfo().then(response => {
      this.model = response.result;
    })
  },
  methods: {
    handleSubmit () {
      console.log('this.model====', this.model)
      upCurrentUserInfo(this.model).then(response => {
        if(response.success == null || response.success == false){
          message.error('系统繁忙，请稍后再试。');
        }else {
          message.success('已保存');
        }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      console.log(pagination)
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.loadData();
    },
    validatePhone(rule, value, callback){
      if(!value){
        callback()
      }else{
        if(new RegExp(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/).test(value)){
          var params = {
            tableName: 'sys_user',
            fieldName: 'phone',
            fieldVal: value,
            dataId: this.userId
          };
          duplicateCheck(params).then((res) => {
            if (res.success) {
              callback()
            } else {
              callback("手机号已存在!")
            }
          })
        }else{
          callback("请输入正确格式的手机号码!");
        }
      }
    },
    validateEmail(rule, value, callback){
      if(!value){
        callback()
      }else{
        if(new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)){
          var params = {
            tableName: 'sys_user',
            fieldName: 'email',
            fieldVal: value,
            dataId: this.userId
          };
          duplicateCheck(params).then((res) => {
            console.log(res)
            if (res.success) {
              callback()
            } else {
              callback("邮箱已存在!")
            }
          })
        }else{
          callback("请输入正确格式的邮箱!")
        }
      }
    },

  }
}
</script>

<style lang="less" scoped>

.avatar-upload-wrapper {
  height: 200px;
  width: 100%;
}

.ant-upload-preview {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.4rem;
    padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1rem;
      margin-top: -1rem;
      color: #d6d6d6;
    }
  }

  img, .mask {
    width: 100%;
    max-width: 180px;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>